<template>
  <rj-modal
    :title="$t('groupOperate.tips')"
    :visible="true"
    :maskClosable="false"
    :footer="null"
    @ok="handleOk"
    :width="400"
    @cancel="handleCancel"
  >
    <div class="shareHint">
      {{ $t('groupOperate.congragulatio') }}，"{{ groupInfo.name }}"
      {{ $t('groupOperate.successshare') }}
    </div>
    <p class="shareT">{{ $t('groupOperate.sharelink') }}</p>
    <a-input style="width: 100%" :value="shareUrl"></a-input>
    <a-button
      type="primary"
      :data-clipboard-text="shareUrl"
      class="copyBtn"
      ref="copyBtn"
      @click="copyUrl"
      >{{ $t('groupOperate.copylink') }}</a-button
    >
  </rj-modal>
</template>

<script>
import { RjModal } from '@components';
import { maccApi, requestHttp } from '@utils/index';
import clipboard from 'clipboard';
import { mapState } from 'vuex';
export default {
  name: 'ShareUrl',
  props: {
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    operation: {
      type: Number,
    },
    expiredAt: {
      type: Number,
    },
  },
  data() {
    return {
      shareUrl: '',
    };
  },
  components: {
    'rj-modal': RjModal,
  },
  computed: {
    ...mapState('Layout', ['newVueFrame']),
    isPrivate() {
      return process.env.VUE_APP_MACC_CLOUD_ENV === 'private';
    },
  },
  mounted() {
    this.getShartUrl();
  },
  methods: {
    async getShartUrl() {
      const { groupId } = this.groupInfo;
      console.log('this.groupInfo', this.groupInfo);
      console.log(this.expiredAt, this.operation);
      const { code, msg, shareCode } = await requestHttp({
        api: `${maccApi.GET_NET_SHART_API}`,
        method: 'POST',
        params: {
          groupId: groupId,
          expiredAt: this.expiredAt,
          operation: this.operation,
        },
      });

      if (code == 0) {
        const { host, pathname } = location;
        if (this.isPrivate) {
          this.shareUrl = `${host}/macc5/adminIntl/#/?rewrite=off&shareCode=${shareCode}`;
        } else {
          this.shareUrl = `${host}/admin3/?rewrite=off&shareCode=${shareCode}`;
        }
      } else {
        this.$message.error(msg || this.$t('groupOperate.getsharelink'));
      }
    },
    handleOk() {
      this.$emit('closeCallback');
    },
    handleCancel() {
      this.$emit('closeCallback');
    },
    copyUrl(event) {
      const copy = this.$refs.copyBtn.$el;
      const clipboardObj = new clipboard(copy);
      //复制成功
      clipboardObj.on('success', () => {
        this.$message.success(this.$t('groupOperate.copysuccess'));
        clipboardObj.destroy();
      });
      //复制失败
      clipboardObj.on('error', () => {
        this.$message.error(this.$t('groupOperate.copyfailure'));
        clipboardObj.destroy();
      });
      clipboardObj.onClick(event); //需要增加这行代码，否则要点击两次才复制生效（clipboard的坑）
    },
  },
};
</script>

<style lang="less" scoped>
.shareT {
  margin: 10px 0;
}
.copyBtn {
  margin-top: 5px;
}
</style>
